<template>
  <el-dialog
    v-model="state.changePasswordDialogVisible"
    title="修改密码"
    width="500"
  >
    <el-form label-position="top" class="login-form" :model="formData" label-width="auto" style="max-width: 400px" :rules="rules">
        <el-form-item label="输入新密码" prop="oldPassword">
            <el-input v-model="formData.oldPassword" placeholder="请输入旧密码"/>
        </el-form-item>
        <el-form-item label="输入新密码" prop="newPassword">
            <el-input v-model="formData.newPassword" placeholder="请输入新密码"/>
        </el-form-item>
    </el-form>
    <template #footer>
        <div class="dialog-footer">
            <el-button @click="state.changePasswordDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="openChangePassword">
            修改
            </el-button>
        </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import { changePassword } from "@/api/userInfo";
import { ElMessage } from "element-plus";
import { useUserInfo } from "@/store/userinfo"
const userStore = useUserInfo()
const formData = reactive({
    oldPassword: "",
    newPassword: "",
})

const rules = reactive({
    oldPassword: [
        {required: true, message: "请输入新密码", trigger: "blur"},
    ],
    newPassword: [
        {required: true, message: "请再次输入新密码", trigger: "blur"},
    ],
})

const state = reactive({
    changePasswordDialogVisible: false,
})
const open = () => {
    state.changePasswordDialogVisible = true
}
defineExpose({
    open
})

const openChangePassword = async() => {
    console.log(userStore.id,'userStore.id')
    const res = await changePassword({id: userStore.id, ...formData});
    if (res.data.code === 0) {
        ElMessage({
            message: res.data.msg,
            type: "success"
        })
        state.changePasswordDialogVisible = false
    } else {
        ElMessage({
            message: "修改失败",
            type: "warning"
        })
    }
}
</script>
<style lang="scss" scoped>

</style>